<template>
    <div class="mall-banner">
        <div class="mall-banner-swiper">
            <swiper :options="swiperOption" ref="mySwiper" id="mallSwiperBox">
                <div class="shade-bg"></div>
                <!-- slides -->
                <swiper-slide>
                    <div class="box">
                        <div class="inner-banner" :style="backgroundDiv"> </div>
                    </div>
                </swiper-slide>
                <swiper-slide>
                    <div class="box">
                        <div class="inner-banner" :style="backgroundDiv"> </div>
                    </div>
                </swiper-slide>
                <swiper-slide>
                    <div class="box">
                        <div class="inner-banner" :style="backgroundDiv"> </div>
                    </div>
                </swiper-slide>
                <!-- Optional controls -->
                <div class="swiper-pagination" slot="pagination"></div>
            </swiper>

        </div>
        <aside>
            <span class="pipe"></span>
            <a href="/uc">
                <i class="icon1"></i>
                <b>个人中心</b>
            </a>
            <a href="/myOrder">
                <i class="icon2"></i>
                <b>我的订单</b>
            </a>
        </aside>
        <div class="gray-box"></div>
        <ul class="merchandise-list">

            <li v-for="(str,index) in advertising" v-bind:key="index" v-lazy:background-image="str.img" @click="goDetail(str)">
                <h2>话费充值代金券</h2>
                <h6>中国石化加油卡代金券</h6>
                <h1>
                    <b>35</b>
                    <span>优点</span>
                </h1>
            </li>

        </ul>
    </div>
</template>


<script>
require('../../assets/css/swiper.css');
import axios from 'axios';

const baseList = [
    {
        url: 'javascript:',
        img: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vvsr72j20p00gogo2.jpg'
        // title: '送你一朵fua'
    },
    {
        url: 'javascript:',
        img: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vw1k2wj20p00goq7n.jpg'
        // title: '送你一辆车'
    },
    {
        url: 'javascript:',
        img: 'https://static.vux.li/demo/5.jpg', // 404
        // title: '送你一次旅行',
        fallbackImg: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vw50iwj20ff0aaaci.jpg'
    }
];

let w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
export default {
    name: 'carrousel',
    data() {
        return {
            advertising: [{ bg: '../../assets/images/p1.jpg' }],
            backgroundDiv: {
                backgroundImage: 'url(' + require('../../assets/images/p1.jpg') + ')'
            },
            swiperOption: {
                slidesPerView: 1,
                observeParents: true,
                observer: true,
                centeredSlides: true,
                notNextTick: true,
                slidesOffsetAfter: 0.05 * w,
                slidesOffsetBefore: 0.05 * w,
                autoplay: {
                    delay: 3000,
                    stopOnLastSlide: true,
                    disableOnInteraction: true
                },
                width: 0.9 * w,
                loop: true,
                loopFillGroupWithBlank: true,
                autoHeight: false,
                pagination: {
                    el: '.swiper-pagination',
                    paginationClickable: true,
                    bulletClass: 'swiper-pagination-bullet my-bullet'
                },
                allowTouchMove: true,
                on: {
                    resize: function() {
                        w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
                        this.params.slidesOffsetBefore = 0.09 * w;
                        this.params.slidesOffsetAfter = 0.09 * w;
                        this.params.width = 0.82 * w;
                        this.update();
                    }
                }
            }
        };
    },
    // you can find current swiper instance object like this, while the notNextTick property value must be true
    // 如果你需要得到当前的swiper对象来做一些事情，你可以像下面这样定义一个方法属性来获取当前的swiper对象，同时notNextTick必须为true
    computed: {
        swiper() {
            return this.$refs.mySwiper.swiper;
        }
    },
    methods: {
        getAjaxImage() {
            let that = this;
            axios({
                method: 'post',
                url: 'mp/user/checkMobile',
                params: {
                    mobile: 15858120414
                }
            }).then(res => {
                if (res.success) {
                    that.advertising = baseList;
                }
            }).catch(err => {});
        },
        goDetail(str){
            str = {
                id:1
            };
            this.$router.replace('/detail/'+str.id);
        }
    },
    mounted() {
        let that = this;
        document.title = '优驾商城';
        setTimeout(function() {
            that.swiper.autoplay.start();
        }, 3000);

        this.getAjaxImage();
    }
};
</script>

<style scoped>
.mall-banner-swiper,
#mallSwiperBox {
    width: 100%;
    height: 3.55rem;
    position: relative;
}
.swiper-container {
    overflow: inherit;
}
.swiper-slide {
    width: 100%;
    height: 100%;
    color: #fff;
}
.swiper-slide .box {
    border-radius: 0.1rem;
    background: #fff;
    height: 100%;
    width: 96%;
    margin: 0 auto;
}
.inner-banner {
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

.mall-banner-swiper .swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-container-horizontal > .swiper-pagination-bullets {
    height: 0.52rem;
    position: absolute;
    left: 0;
    width: 100%;
    bottom: -1px;
    z-index: 9;
    background-size: 100% 100%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-image: url(../../static/img/screen_round.png);
}

aside {
    display: table;
    width: 100%;
    padding-top: 0.15rem;
    height: 1.5rem;
    position: relative;
}
aside > a {
    height: 1.5rem;
    display: table-cell;
    width: 50%;
    font-size: 0;
    text-align: center;
    vertical-align: middle;
}
aside .pipe {
    display: block;
    position: absolute;
    width: 2px;
    margin-left: -1px;
    left: 50%;
    height: 0.5rem;
    background: #c2c2c2;
    top: 50%;
    margin-top: -0.25rem;
    text-align: center;
    padding-top: 0.15rem;
}
aside .icon1,
aside .icon2 {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    background-size: 100% 100%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-image: url(../../static/img/m_icon1.png);
    vertical-align: middle;
    margin-right: 0.2rem;
}
aside .icon2 {
    background-image: url(../../static/img/m_icon2.png);
}
aside b {
    display: inline-block;
    font-size: 0.3rem;
    color: #666;
    vertical-align: middle;
    font-weight: 400;
}
.gray-box {
    height: 0.25rem;
    background: #fafafa;
}
.merchandise-list {
    padding-top: 0.38rem;
    list-style: none;
    padding-bottom: 1rem;
    -webkit-overflow-scrolling: touch;
}
.merchandise-list li {
    margin: 0 auto 0.38rem;
    width: 92%;
    height: 3.2rem;
    position: relative;
    list-style: none;
    border-radius: 10px;
    background-size: 100% 100%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}
.merchandise-list li h2,
.merchandise-list li h6 {
    font-size: 0.36rem;
    color: #eac486;
    white-space: nowrap;
    text-align: left;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 100%;
    padding: 0.4rem 0.3rem 0.1rem 0.3rem;
}
.merchandise-list li h6 {
    font-size: 0.24rem;
    padding-top: 0;
    vertical-align: top;
}
.merchandise-list li h1 {
    font-size: 0.36rem;
    color: #eac486;
    white-space: nowrap;
    text-align: right;
    text-overflow: ellipsis;
    overflow: hidden;
    position: absolute;
    right: 0.4rem;
    bottom: 0.08rem;
}
.merchandise-list li h1 b {
    font-size: 0.72rem;
    color: #eac486;
    vertical-align: baseline;
    margin-right: 4px;
}
.merchandise-list li h1 span {
    vertical-align: 0.02rem;
    font-size: 0.24rem;
}
</style>

